<!-- views/dashboard/Analysis.vue -->
<template>
  <div class="dashboard-analysis">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>警情类型分布</span>
            </div>
          </template>
          <div ref="alarmTypeChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>警情处理效率</span>
            </div>
          </template>
          <div ref="alarmEfficiencyChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="mt-20">
      <template #header>
        <div class="card-header">
          <span>关键指标趋势</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[
              new Date(2000, 1, 1, 0, 0, 0),
              new Date(2000, 1, 1, 23, 59, 59)
            ]"
          />
        </div>
      </template>
      <div ref="keyIndicatorsChart" class="chart"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const dateRange = ref([])

const alarmTypeChart = ref(null)
const alarmEfficiencyChart = ref(null)
const keyIndicatorsChart = ref(null)

const initChart = (chartRef, option) => {
  nextTick(() => {
    const chart = echarts.init(chartRef.value)
    chart.setOption(option)
    window.addEventListener('resize', () => chart.resize())
  })
}

onMounted(() => {
  initChart(alarmTypeChart, {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '警情类型分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '火灾' },
          { value: 735, name: '救援' },
          { value: 580, name: '其他' }
        ]
      }
    ]
  })

  initChart(alarmEfficiencyChart, {
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  })

  initChart(keyIndicatorsChart, {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['警情数量', '处理时间', '出警次数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '警情数量',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
      },
      {
        name: '处理时间',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90]
      },
      {
        name: '出警次数',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410, 280, 230, 170, 190, 220]
      }
    ]
  })
})
</script>
<style lang="scss" scoped>
.dashboard-analysis {
  .chart {
    height: 400px;
  }

  .mt-20 {
    margin-top: 20px;
  }
}
</style>
